<template>
  <div class="content_main">
    <div v-for="(item, index) in data" :key="item" :class="{ side_top: index > 0 }" style="line-height: 52px; height: 52px">
      <div class="flex w-full text-[14px] justify-between">
        <div class="whitespace-nowrap overflow-hidden text-ellipsis mr-[10px] title_color ml-[10px]" style="min-width: 60px; max-width: calc(100% - 160px)" @click="handelDetails(item.id)">
          【 {{ item?.messageType?.label }} 】 {{ item.title }}
        </div>
        <div class="text-right mr-[10px] whitespace-nowrap" style="min-width: 60px; width: 140px">
          {{ item.sendTime }}
        </div>
      </div>
    </div>
  </div>
  <Details v-model="detailsVisible" :id="detailsIds" @close="detailsIds = null" />
</template>
<script setup>
import Details from "@/views/notice/components/details/index.vue"
const props = defineProps({
  data: { type: [Array, Object], default: () => [] },
})
const { data } = toRefs(props)
const detailsVisible = ref(false)
const detailsIds = ref(null)
const handelDetails = (id) => {
  detailsIds.value = id
  detailsVisible.value = true
}
</script>

<style lang="scss" scoped>
.side_top {
  border-top: 1px solid var(--base-border-color);
}
.content_main {
  height: calc(100% - 100px);
  // margin-top: 4px;
}
.title_color {
  color: #3487ff;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
</style>
